<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
<!--          <span><el-image src="/src/assets/icon/ranking.png" style="margin-right: 10px; max-width: 20px;max-height: 20px"  /></span>-->
          <p style="margin-bottom: 0 !important;" >
            <span>热度榜</span>
          </p>
        </div>
      </template>

      <div class="RankingContent" v-if="state.isData"  >
         <div v-for="(item,index) in state.dataRanking" :key="index" @click="method.articleToDetail(item.id)"  class="list-group-item list-group-item-action p-1"
              style="color: #252933" >
           <span class="rankingColorOne mr-2 " >{{index+1}}</span>
           <span>{{ item.title}}</span>
         </div>
      </div>

      <div class="RankingContent" v-else>
        <el-empty></el-empty>
      </div>

    </el-card>
</template>



<script setup >
import {onMounted, reactive} from "vue";
import {selectHotArticles} from "@/api/artcle/article";
import router from "@/router";

const state = reactive({
  isData:false,
  count:1,
  size:10,
  dataRanking:[],
})

const method ={
    inis:async ()=>{
      await method.getArticleHot()
    },
    getArticleHot:async()=>{
      let params = {
        pageNum: state.count,
        pageSize: state.size,
      }
       await selectHotArticles(params).then(res=>{
          state.isData =true;
          state.dataRanking=  res.data.rows
    })
  },
  articleToDetail:(id)=>{
    router.push({
      path:"/index/article/detail",
      query:{
        id:id
      }
    })
  },
}
onMounted(()=>{
  method.inis();
})



</script>


<style scoped>
.box-card{
  /*margin-top: 70px;*/
}

.card-header{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card-header span{
  font-size: 16px;
  font-weight: bold;
  color: #343a40!important;
  max-width: 100%;
  max-height: 100%;
}
.card-header img{
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.RankingContent {
  height: 300px;
  font-size: 14px;
}


.list-group-item{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rankingColorOne{
   color: #f64242;
}
</style>
